import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {
    WeaLocaleProvider,
    WeaTab,
    WeaTop,
    WeaDialog,
    WeaNewScroll,
    WeaAlertPage,
    WeaMoreButton,
    WeaRightMenu
} from "ecCom";
import {WeaTableNew} from "comsMobx";
import {Button} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import '../../style/mouldTypeListPage.less';

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("mouldTypeStore")
@observer
class MouldTypeListPage extends Component {

    componentDidMount() {
        const {mouldTypeStore} = this.props;
        mouldTypeStore.getTableData();
    }

    render() {
        const {mouldTypeStore} = this.props;
        const {
            tableStore, authorized, loading, selectedRowKeys, rowSelection, onOperatesClick, dialogVisible, saveForm, edit,
            closeDialog, getTableData
        } = mouldTypeStore;
        if (!authorized) {
            return (<NoRightComponent/>);
        }
        const dialogTitle = edit ? getLabel("518558", "编辑模板类型") : getLabel("518557", "新建模板类型");
        const dialogBtn = [
            <Button type="primary" disabled={loading} onClick={() => saveForm()}>{getLabel("30986", "保存")}</Button>
        ]
        return (
            <div>
                <WeaRightMenu datas={this.getDropMenuDatas()}>
                    <WeaTop
                        title={getLabel("518481", "模板类型")}
                        icon={<i className={IconConstant.WEATOP_ICON}/>}
                        iconBgcolor={IconConstant.WEATOP_ICON_BG_COLOR}
                        buttons={this.getWeaTop()}
                        loading={loading}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                    >
                        <Fragment>
                            <WeaTab
                                searchType={['base']}
                                onSearch={value => getTableData({name: value})}
                            />
                            <WeaTable
                                hasOrder={true}
                                needScroll={true}
                                comsWeaTableStore={tableStore}
                                getColumns={(cols) => this.getColumns(cols)}
                                rowSelection={{
                                    selectedRowKeys: selectedRowKeys,
                                    onChange: rowSelection,
                                }}
                                onOperatesClick={onOperatesClick}
                            />
                        </Fragment>
                    </WeaTop>
                </WeaRightMenu>
                <WeaDialog
                    onCancel={closeDialog}
                    title={dialogTitle}
                    visible={dialogVisible}
                    style={{width: 600, height: 180}}
                    hasScroll
                    buttons={dialogBtn}
                    icon={IconConstant.WEADIALOG_ICON}
                    iconBgcolor={IconConstant.WEADIALOG_ICON_BG_COLOR}
                    className="mould-type-dialog"
                >
                    {this.getForm()}
                </WeaDialog>
            </div>
        );
    }

    getDropMenuDatas() {
        const {mouldTypeStore} = this.props;
        const {deleteBtnDisbled, openDialog, affirmDelete} = mouldTypeStore;
        const dropMenuDatas = [
            {
                key: '1',
                disabled: false,
                icon: <i className='icon-coms-Add-to'/>,
                content: getLabel(LanguageConstant.NEW_ADD, "新建"),
                onClick: key => openDialog(),
            },
            {
                key: '2',
                disabled: deleteBtnDisbled,
                icon: <i className='icon-coms-Batch-delete'/>,
                content: getLabel(LanguageConstant.MULTI_DELETE, "批量删除"),
                onClick: key => affirmDelete("", true),
            },
        ];
        return dropMenuDatas;
    }

    getWeaTop() {
        const {mouldTypeStore} = this.props;
        const {deleteBtnDisbled, openDialog, affirmDelete} = mouldTypeStore;
        const btns = [
            <Button type="primary" onClick={() => openDialog()}>{getLabel(LanguageConstant.NEW_ADD, "新建")}</Button>,
            <Button type="primary" disabled={deleteBtnDisbled}
                    onClick={() => affirmDelete("", true)}>{getLabel(LanguageConstant.MULTI_DELETE, "批量删除")}</Button>,
        ]
        return btns;
    }

    getColumns(columns) {
        const {mouldTypeStore} = this.props;
        const {openEditDialog} = mouldTypeStore;
        return columns.map((col) => {
            if (col.dataIndex == "name") {
                return {
                    ...col,
                    title: col.title,
                    render(text, record, index) {
                        return (
                            <a style={{color: "#00a9ff"}} onClick={() => openDialog(record.id)}>{text}</a>
                        )
                    }
                }
            }
            return col;
        });
    }

    //获取form
    getForm() {
        const {mouldTypeStore} = this.props;
        const {form} = mouldTypeStore;
        return form.render();
    }

}

export default MouldTypeListPage;